<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="字典名称">
      <el-input v-model="formInline.dictName" placeholder="字典名称"></el-input>
    </el-form-item>
    <el-form-item label="字典类型">
      <el-input v-model="formInline.dictType" placeholder="字典类型"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="活动区域">
        <el-option label="正常" value="0"></el-option>
        <el-option label="异常" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
          v-model="birthday"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-button @click="openadd">新增</el-button>
  <el-button @click="deleted">删除</el-button>
  <el-button @click="excel">excel</el-button>
  <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="dictId"
        label="编号">
    </el-table-column>
    <el-table-column
        prop="dictName"
        label="字典名称">
    </el-table-column>
    <el-table-column
        label="字典类型">
      <template v-slot="scope">
        <el-button type="text" @click="datalist(scope.row.dictType)">{{scope.row.dictType}}</el-button>
      </template>
    </el-table-column>
    <el-table-column
        label="状态">
      <template v-slot="scope">
        <el-tag v-if="scope.row.status==0">正常</el-tag>
        <el-tag v-if="scope.row.status==1">异常</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="openupdate(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="del(scope.row.dictId)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="修改字典" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="字典名称">
        <el-input v-model="form.dictName"></el-input>
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input v-model="form.dictType"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">异常</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注"  label-width="120px">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="新增字典" :visible.sync="dialogFormVisibled">
    <el-form :model="formadd">
      <el-form-item label="岗位名称">
        <el-input v-model="formadd.dictName"></el-input>
      </el-form-item>
      <el-form-item label="岗位编号">
        <el-input v-model="formadd.dictType"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio v-model="formadd.status" label="0">正常</el-radio>
        <el-radio v-model="formadd.status" label="1">异常</el-radio>
      </el-form-item>
      <el-form-item label="备注"  label-width="120px">
        <el-input type="textarea" v-model="formadd.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisibled = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      dialogFormVisible:false,
      form:{},
      ids:[],
      dialogFormVisibled:false,
      formadd:{},
      birthday:[],
      formInline:{},
    }
  },
  methods:{
    list(){
      this.formInline.min=this.birthday[0];
      this.formInline.max=this.birthday[1];
      this.axios.post("http://localhost:8090/type/list",this.formInline).then(r=>{7
        this.tableData=r.data.data;
      })
    },
    openupdate(dicttype){
      this.form=dicttype;
      this.dialogFormVisible=true;
    },
    update(){
      this.axios.post("http://localhost:8090/type/update",this.form).then(()=>{
        this.$message.success("修改成功");
        this.dialogFormVisible=false;
        this.list();
      })
    },
    del(dictId){
      this.axios.post("http://localhost:8090/type/del?dictId="+dictId).then(()=>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    handleSelectionChange(val){
      this.ids=[]
      if (val.length>0 && val!=null){
        for (let i=0;i<val.length;i++){
          this.ids.push(val[i].dictId)
        }
      }
    },
    deleted(){
      this.axios.post("http://localhost:8090/type/del?dictId="+this.ids).then(()=>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    excel(){
      window.location.href="http://localhost:8090/type/excel"
    },
    openadd(){
      this.dialogFormVisibled=true;
    },
    add(){
      this.axios.post("http://localhost:8090/type/add",this.formadd).then(()=>{
        this.$message.success("新增成功");
        this.dialogFormVisibled=false;
        this.list();
      })
    },
    onSubmit(){
      this.list();
    },
    datalist(dictType){
      window.location.href="http://localhost:8080/data?dictType="+dictType;
    }
  },
  created(){
    this.list();
  },
}
</script>

<style scoped>

</style>